<template>
	<s-layout   navbar="custom1111" :bgStyle="{
	 color: '#F8F8F8'
	}" onShareAppMessage>
		<assNavbar title="店铺信息" :background="{img: 'none',BGcolor: '#fff'}"></assNavbar>
	
		<view class="form-box ss-p-l-24 ss-p-r-24 ss-p-b-24" >
			<view>
				<uni-forms ref="form" :modelValue="state.form" :rules="rules" label-width="90">
					<view  style="padding:40rpx 30rpx;background-color: #fff;border-radius: 20rpx;">
						<!-- 邀请人信息从已入驻的资料中获取，禁止修改 -->
						<view class="form-box-head-title">邀请人信息</view>
						<uni-forms-item label="邀请人姓名" name="agency_name" >
							<view class="form-box-input-item">
								<input :disabled="true" type="text" disabled v-model="state.p_user.nickname" placeholder="" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="邀请人手机号码" name="agency_mobile" >
							<view class="form-box-input-item">
								<input :disabled="true" type="number" disabled :maxlength="11" v-model="state.p_user.mobile" placeholder="" />
							</view>
						</uni-forms-item>
					</view>
					
					
					<view  class="ss-m-t-20 bg-white"  style="padding:40rpx 30rpx;border-radius: 20rpx;">
						<view class="form-box-head-title">店铺信息</view>
						<uni-forms-item label="商户姓名" name="merchant_name" required>
							<view class="form-box-input-item">
								<input :disabled="state.disabled"  type="text" v-model="state.form.merchant_name" placeholder="请输入商户姓名" @input="setValue($event,'merchant_name')" :maxlength="20"/>
							</view>
						</uni-forms-item>
						<uni-forms-item label="店铺手机号码" name="mobile" required>
							<view class="form-box-input-item">
								<input :disabled="state.disabled" type="number" :maxlength="11" v-model="state.form.mobile" placeholder="请输入手机号码" @input="setValue($event,'mobile')"/>
							</view>
						</uni-forms-item>
						
						<uni-forms-item label="店铺名称" name="name" required>
							<view class="form-box-input-item">
								<input :disabled="state.disabled" :maxlength="20" type="text" v-model="state.form.name" placeholder="请输入店铺名称" @input="setValue($event,'name')"/>
							</view>
						</uni-forms-item>
						
						<uni-forms-item label="商户位置" name="address" >
							<view class="form-box-input-item">
								<input :disabled="state.disabled" type="text" v-model="state.form.address" placeholder="请输入商户位置" @input="setValue($event,'address')"/>
							</view>
						</uni-forms-item>
						
					</view>
					
					
					<view  class="ss-m-t-20 bg-white" style="padding:40rpx 30rpx;border-radius: 20rpx;">
						<view class="form-box-head-title"><span style="color:#ED1010">*</span>实名认证（身份证正反面照片）</view>
						
						<uni-forms-item  name="reverse_card" >
							<view class="form-box-input-item-left ss-flex justify-between" >
								<s-uploader 
								 :disabled="state.disabled"
								fileMediatype="image"
								v-model:url="state.form.reverse_card" 
								:limit="1" 
								:listStyles="{border:false}"
								:imageStyles="{ width: '300rpx', height: '300rpx' }">
									<image style=" width: 300rpx" 
									:src="sheep.$url.cdn('/storage/giveaway/20250315/85e929c2b8c18b2221bb4c6798e94402.png')" 
									mode="widthFix" />
								</s-uploader>
								<s-uploader :disabled="state.disabled" v-model:url="state.form.protrait_card" :limit="1" :imageStyles="{ width: '300rpx', height: '300rpx' }">
									<image style=" width: 300rpx;border-radius:20rpx"
									:src="sheep.$url.cdn('/storage/giveaway/20250315/4b254833607e2d10789529f46a18e248.png')" 
									mode="widthFix" />
								</s-uploader>
							</view>
						</uni-forms-item>
					</view>
					<view  class="ss-m-t-20 bg-white" style="padding:40rpx 30rpx;border-radius: 20rpx;">
						<view class="form-box-head-title"><span style="color:#ED1010">*</span>店铺头像</view>
						
						<uni-forms-item  name="thumb" >
							<view class="form-box-input-item-left ss-flex justify-between" >
								<s-uploader 
								 :disabled="state.disabled"
								fileMediatype="image"
								v-model:url="state.form.thumb" 
								:limit="1" 
								:listStyles="{border:false}"
								:imageStyles="{ width: '300rpx', height: '300rpx' }">
									<image style=" width: 300rpx" 
									:src="sheep.$url.cdn('/storage/giveaway/20250315/85e929c2b8c18b2221bb4c6798e94402.png')" 
									mode="widthFix" />
								</s-uploader>
							</view>
						</uni-forms-item>
					</view>
					
					<view  class="ss-m-t-20 bg-white" style="padding:40rpx 30rpx;border-radius: 20rpx;">
						<view class="form-box-head-title"><span style="color:#ED1010">*</span>营业执照备案</view>
						
						<uni-forms-item  name="business_linence" >
							<view class="ss-flex justify-between"  >
								<s-uploader  :disabled="state.disabled"
								fileMediatype="image"
								v-model:url="state.form.business_linence" 
								:limit="1" 
								:listStyles="{border:false}"
								:imageStyles="{ width: '800rpx',height:'400rpx'}">
									<image  style=" width: 800rpx;border-radius:20rpx" 
									:src="sheep.$url.cdn('/storage/giveaway/20250315/42128206c05f913c917c46a43371644a.png')" 
									mode="widthFix" />
								</s-uploader>
							</view>
						</uni-forms-item>
					</view>
					<view style="height:300rpx"></view>
				</uni-forms>
			</view>
		</view>
		
		<su-fixed bottom >
			<view class="bg-white ss-p-t-20 ss-p-b-60 ss-flex justify-center">
				<button  class="btn ss-reset-button " @tap="submit()">
					提交
				</button>
			</view>
			
		</su-fixed>
		
	</s-layout>
	
	
	<!-- 地址选择弹窗 -->
	<!-- <su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" /> -->

</template>

<script setup>
	import assNavbar from '@/components/ass-navbar.vue';
	import $store from '@/sheep/store';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import Test from "@/sheep/helper/test.js";
	import {
		showAuthModal,
	} from '@/sheep/hooks/useModal';
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import  { clone } from 'lodash'
	const form = ref(null);
	// 数据
	const state = reactive({
		type:0,//0商家自己入驻   1代理帮商家入驻
		showRegion:false, 
		form:{
			reverse_card:'',//身份证正面
			protrait_card:'',//身份证反面
			business_linence:'',
			thumb:'',
			name:null,
			mobile:null,
			merchant_name:null,
			address:null,
			
		},
		p_user:{
			mobile:'',
			nickname:''
		},
		address_txt:'',
		disabled:false, 
		seeAccount:false,//是否是查看账号
		accountInfo:{},//账号信息
		image1:'',
		image2:'',
		image3:'',
		image4:'',
		image_more:''
		
	});
	
	const rules = {
		name: {rules: [{required: true,errorMessage: '请填写姓名',}]},
		role: {rules: [{required: true,errorMessage: '请填写',}]},
		reverse_card: {rules: [{required: true,errorMessage: '请选择',}]},
		protrait_card: {rules: [{required: true,errorMessage: '请选择',}]},
		thumb: {rules: [{required: true,errorMessage: '请选择',}]},
		business_linence: {rules: [{required: true,errorMessage: '请选择',}]},
		merchant_name: {rules: [{required: true,errorMessage: '请填写商户名称',}]},
		mobile: {
			rules: [{
				required: true,
				errorMessage: '请输入联系电话',
			},{
				validateFunction: (rule, value, data, callback) => {
					// 异步需要返回 Promise 对象
					return new Promise((resolve, reject) => {
						if (Test.mobile(value)) {
							resolve()
						} else {
							reject(new Error('联系电话格式错误'))
						}
					})
				}
			}]
		},
		
	}

	
	
	const submit = () => {
		let formSubmit={}
		let keys = ['name','thumb','mobile','merchant_name','address','protrait_card','reverse_card','business_linence']
		keys.forEach((key)=>{
			formSubmit[key] = state.form[key]
		})
		form.value.validate().then(async formVal => {
			const res = await sheep.$api.store.editStore({
				...formSubmit,
			});
			if(res.error==0){
				uni.showToast({
					title: '保存成功',
					icon: 'none',
					mask:true
				})
				setTimeout(()=>{
					sheep.$router.back()
				},1400)
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				})
			}
			
		}).catch(err => {
			console.log('err------',err);
		})
	}

	
	onLoad(async(option) => { 
		await sheep.$store('user').getInfo()
		state.p_user = sheep.$store('user')?.userInfo?.p_user || {mobile:'',
			nickname:''}
		state.form = {
			...sheep.$store('user').userInfo.cyq_store,
			business_linence:sheep.$store('user').userInfo.cyq_store?.business_linence||'',
			reverse_card:sheep.$store('user').userInfo.cyq_store.reverse_card||'',
			protrait_card:sheep.$store('user').userInfo.cyq_store.protrait_card||'',
			thumb:sheep.$store('user').userInfo.cyq_store.thumb||'',
			address:sheep.$store('user').userInfo.cyq_store.address||''
		}
		
	})
	
	
	function setValue(e,name){
		form.value.setValue(name,e.detail.value);
	}
	
	onUnload(() => {
		
	})
</script>

<style lang="scss" scoped>

	view {
		box-sizing: border-box;
	}
	.btn{
		  width: 702rpx;
		  height: 80rpx;
		  background: #003288;
		  border-radius: 49rpx;
		  font-size: 32rpx;
		  color: #FFFFFF;
	  }
	  .btn2{
		 width: 124rpx;
		 height: 55rpx;
		 line-height: 55rpx;
		 background: #E8F1FF;
		 border-radius: 28rpx;
		 border: 2rpx solid #003288; 
		 font-size: 28rpx;
		 color: #01338A;
	  }
	::v-deep {
		// .radio__inner{
		// 	border-color: #ffdfc7!important;
		// }
		// .radio__inner-icon{
		// 	border-color: #ffdfc7!important;
		// 	background-color:var(--ui-BG-5)!important;
		// }
		.file-picker__box-content{
			border:none!important
		}
		
		.uni-forms-item__inner {
			padding-bottom: 20rpx
		}

		.uni-error-message {
			height: 20rpx;
			display: flex;
		}

		.uni-error-message-text {
			font-size: 20rpx;
			line-height: 1;
		}
	}

	

	


	
	.form-box {
		width: 100%;
		border-radius: 24rpx 24rpx 0 0;
		background: #F8F8F8;
		padding-bottom:60rpx;
		
		position: relative;
		

	}
	.morePic{
		width: 300rpx;
		height:300rpx;
		line-height:300rpx;
		background:#F5F4FC;
		font-size:32rpx;
		text-align: center;
		margin-bottom: 20rpx;
		
	}
	.form-box-input-item-left {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		view{
			
		}
	}

	.form-box-input-item {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		input {
			padding-top:12rpx;
			font-size:30rpx;
			text-align: right;
		}
	}

	::v-deep .uni-forms-item__label {
		width:max-content!important;
		.label-text{
			font-size:30rpx;
		}
	}

	::v-deep .uni-forms-item__inner {
		padding-bottom: 0;
		padding-top:20rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	
:deep().uni-radio-input{
	margin:0!important
}
	


	.form-box-head-title{
		font-weight: bold;
		font-size: 32rpx;
		color: #323232;
		text-align: left;
		font-style: normal;
	}
	
	.chongwu-zhaopian{
		width:100rpx;
		height:120rpx;
	}
	
</style>